<template>
  <div>
    <div class="top">
      <el-button type="primary" round style="width: 120px;height: 36px;margin-right: 10px;font-size: 18px">新增</el-button>
      <el-button type="primary" round style="width: 120px;height: 36px;margin-right: 10px;font-size: 18px">编辑</el-button>
      <el-button type="primary" round style="width: 120px;height: 36px;margin-right: 10px;font-size: 18px">删除</el-button>
      <el-input
        size="medium"
        placeholder="开始时间"
        suffix-icon="el-icon-date"
        style="width:200px;height: 36px;margin-left: 30px"
      >
      </el-input><span>-</span><el-input
        size="medium"
        placeholder="结束时间"
        suffix-icon="el-icon-date"
        style="width:200px;height: 36px;"
      >
      </el-input>
      <el-input
        size="medium"
        placeholder="关键字搜索"
        suffix-icon="el-icon-search"
        style="width:200px;height: 36px;margin-left: 20px"
      >
      </el-input>
    </div>
    <div class="bottom">
      <el-table ref="table" :data="tableData" size="small" style="width: 100%;">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="contractType" width="159" label="合同类型"></el-table-column>
        <el-table-column prop="saleId" width="159" label="合同所属销售"></el-table-column>
        <el-table-column prop="reportAmount" width="159" label="合同金额"></el-table-column>
        <el-table-column prop="begin" width="159" label="签署时间"></el-table-column>
        <el-table-column prop="contractTerm" width="159" label="合同期限"></el-table-column>
        <el-table-column prop="stat" width="159" label="合同状态"></el-table-column>
        <el-table-column prop="operation" width="159" label="操作">
          <template slot-scope="scope">
            <button
              class="detail"
              @click="clinicDetail(scope.row)"
            >查看详情
            </button>
            <button
              class="download"
              @click="clinicDetail(scope.row)"
            >下载
            </button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { contractQuery } from '@/api/oper';
export default {
  name: 'ContractList',
  data() {
    return {
      tableData: []
    };
  },
  created() {
    contractQuery().then(res => {
      console.log(res);
      this.tableData = res.content;
    });
  }
};
</script>

<style scoped>
  .top{
    margin: 30px 0px 30px 20px;
  }
  .detail{
    width: 80px;
    height: 24px;
    background: #D8E4F6;
    border-radius: 14px;
    font-size: 14px;
    color: #508FCC;
    border: none;
    margin-left: -10px;
  }
  .download{
    width: 52px;
    height: 24px;
    background: #D8E4F6;
    border-radius: 14px;
    border: none;
    font-size: 14px;
    color: #508FCC;
    margin-left: 6px;
  }
</style>
